import React, { PureComponent } from 'react';
import {TopicWrapper, TopicItem, TopicMore} from '../style';
import { RightOutlined } from '@ant-design/icons';


class Topic extends PureComponent {
    topicFunc(item){
        if(item.img){
            return(
                <TopicItem key={item.id}>
                    <img
                        className='topic-pic'
                        src={item.img}
                        alt=''
                    />
                    {item.title}

                </TopicItem>
            )
        } else {
            return (
                <TopicMore key={item.id}>
                    {item.title}
                    <RightOutlined />
                </TopicMore>
            )
        }
    }
    render() {
        const { list } = this.props;
        console.log(1111, list);
        return (
            <TopicWrapper>

                {
                    list.map(item => {
                        return this.topicFunc(item)
                    })
                }
            </TopicWrapper>
        )
    }
}


export default Topic;
